<template>
  <div class="wrapper w-100 h-100">
    <div class="banner p_relative " ref="banner" >
      <div class="banner_marker p_absolute w-100 h-100">
      </div>
      <div style="padding-top: 100px;">
        <div class="logo p_absolute" style="left: 0;top:0;">
          <div :text="currentTime" class="float-right txt_blue font18 pr-5 currentTime" style="line-height: 50px;">{{currentTime}}</div>
        </div>
        <el-row  type="flex" justify="space-between" style="padding: 0 30px;">
          <el-col style="flex: none;width: 433px">
            <!--设备状态 -->
            <div class="ur-card w-100">
              <card-header :title="'设备状态'" :hasBackground="true"></card-header>
              <ul class="ur-card-body deviceGroup" :class="{active:statisticIndex==1}">
                <li class="deviceItem" v-for="(item,index) in devices">
                  <i class="iconfont mr-2" :class="'icon-'+item.icon"></i>
                  <div v-if="initData.useDeviceData"><label>{{initData.deviceData[item.data]}}</label><span>{{item.name}}</span></div>
                  <div v-else><label>{{totalCount[item.data]}}</label><span>{{item.name}}</span></div>
                </li>
              </ul>
            </div>
            <!--上电时长-->
            <electricity-time class="w-100" :height="140" :statisticIndex="statisticIndex" :isRefresh="isRefresh"></electricity-time>
            <!--能耗信息-->
            <energy class="w-100" :height="140" :statisticIndex="statisticIndex" :isRefresh="isRefresh" @getYActual="getYActual"></energy>
            <!--运行计划-->
            <task class="w-100" :height="140" :statisticIndex="statisticIndex" :offTime="totalCount.STime" :onTime="totalCount.ETime"></task>
          </el-col>
          <!--        中间-->
          <el-col :span="12" class="p_relative">
            <!-- 圆形 -->
            <transition name="slide-fade"></transition>
            <div class="statistic_wrap">
              <!--            绿块-->
              <div class="statistic_active" :class="'active'+statisticIndex"></div>
              <ul class="statisticGroup">
                <template v-for="(item,index) in statistic">
                  <li  class="statisticItem font12" @mousemove="clearTimer((index+1))" @mouseleave="setTimer" :class="{active:(index+1)==statisticIndex}">{{item.name}}</li>
                </template>
              </ul>
              <transition name="el-zoom-in-center">
                <div v-show="showIcon" class="position-absolute statistic_info">
<!--                  <h4><i class="iconfont mr-0" :class="'icon-'+iconImg[statisticIndex]" style="width:60px;height: 60px;"></i></h4>-->
                  <h4>
                    <!--阿尔伦斯造假数据-->
                    <template v-if="statisticIndex==1" ><label style="font-size: 26px;">{{initData.deviceData.BulbCount||totalCount.BulbCount}}</label></template>
                    <template v-else-if="statisticIndex==2">{{totalCount.OnlineRate}}</template>
                    <template v-else-if="statisticIndex==3">
                      <label class="font20">{{YActual}}</label>
                    </template>
                    <template v-else-if="statisticIndex==4">
                    <!-- 23点前 3925附件跳动，23点后2655（±20）附近跳动-->
                      <label class="font22">{{getPower}}  </label>
                    </template>
                    <template v-else-if="statisticIndex==5">
                      <label class="font22">{{totalCount.EccOnlineCount}}</label>
                  <!--    <div class="mb-2">
                        <label class="d-block font16" style="line-height: 24px;">{{totalCount.ETime}}<br>{{totalCount.STime}}</label>
                      </div>-->
                    </template>
                     <!-- 亮灯率-->
                    <template v-else-if="statisticIndex==6">{{totalCount.YLightingRate}}</template>
                    <template v-else-if="statisticIndex==7">{{workCompleted}}</template>
                    <template v-else>{{totalCount.IAlarmCount}}</template>
                  </h4>
                  <h6 class="mb-0">{{statistic[statisticIndex-1].name}}</h6>
                </div>
              </transition>
            </div>
            <!-- 区域地图-->
            <div class="p_relative" style="height: 430px;">
              <!--图标-->
              <ul class="regionMap_icon">
                <li><i class="iconfont icon-ecc-alarm"></i>箱变异常</li>
                <li><i class="iconfont icon-off"></i>灯具故障</li>
                <li><i class="iconfont icon-line"></i>线路故障</li>
              </ul>
              <!--第一种东营-->
              <u-map v-if="global.MapIndex==1" :regions="regions" @updateXY="updateXY" @updateShowPopover="updateShowPopover"></u-map>
              <!--第二种鄄城-->
              <u-map2 v-else-if="global.MapIndex==2" :regions="regions" @updateXY="updateXY" @updateShowPopover="updateShowPopover"></u-map2>
              <!--第三种鄄城-->
              <u-map3 v-else-if="global.MapIndex==3" :regions="regions" @updateXY="updateXY" @updateShowPopover="updateShowPopover"></u-map3>
              <!---第四种济南市章丘-->
              <u-map4 v-else-if="global.MapIndex==4" :regions="regions" @updateXY="updateXY" @updateShowPopover="updateShowPopover"></u-map4>
              <!--第五种阿尔斯伦-->
              <u-map5 v-else-if="global.MapIndex==5" :regions="regions" @updateXY="updateXY" @updateShowPopover="updateShowPopover"></u-map5>
              <!--第六种青岛黄岛区-->
              <u-map6 v-else-if="global.MapIndex==6" :regions="regions" @updateXY="updateXY" @updateShowPopover="updateShowPopover"></u-map6>
            </div>
            <div class="p_absolute d-flex " style="left:50%;bottom:50px;margin-left: -217px;">
              <el-button class="ur-btn ur-btn-primary-large">
                定时器 <el-switch  v-model="isRefresh" active-color="#1DC092" inactive-color="#EF2A60"></el-switch>
              </el-button>
              <el-button class="ur-btn ur-btn-primary-large " @click="toLightSystem" style="margin-left: 32px;">今日概览</el-button>
              <el-button class="ur-btn ur-btn-primary-large" style="margin-left: 32px;"  @click="fetch.toPage('/work')">工单详情</el-button>
              <el-button class="ur-btn ur-btn-primary-large" style="margin-left: 32px;" @click="fetch.toPage('/map')">地图监控</el-button>
            </div>
          </el-col>
          <!--      右侧  -->
          <el-col style="flex: none;width: 433px">
            <!--运行状况-->
            <div class="ur-card w-100">
              <card-header :title="'运行状况'" :hasBackground="true"></card-header>
              <ul class="ur-card-body deviceStateGroup pl-2" :class="{active:statisticIndex==5}">
                <li class="deviceStateItem" v-for="(item,index) in deviceState">
                  <div class="w70 text-center">
                    <i class="iconfont mr-0" :class="'icon-'+item.icon" ></i>
                    <span class="w70">{{item.name}}</span>
                  </div>

                  <div class="d-flex flex-column" style="margin-top: -10px;">
                    <template v-for="(sub,subIndex) in item.child">
                      <span style="margin-left: -15px">{{sub.subName}}</span>
                      <label v-if="sub.data=='YLightingRate'">{{global.YLightingRate||totalCount[sub.data]}}</label>
                      <!--在线个数 阿尔伦斯-->
                      <label v-else-if="sub.data=='EccOnlineCount'">{{initData.deviceData.EccCount||totalCount[sub.data]}}</label>
                      <label v-else-if="sub.data=='YesEnergyRate'">{{global.YesEnergyRate||totalCount[sub.data]}}</label>
                      <label v-else>{{totalCount[sub.data]}}</label>
                    </template>
                  </div>
                </li>
              </ul>
            </div>
            <!--亮灯率-->
            <light-rate class="w-100" :height="140" :statisticIndex="statisticIndex" :isRefresh="isRefresh"></light-rate>
            <!--工单派发-->
            <work class="w-100" :height="140" :statisticIndex="statisticIndex" :isRefresh="isRefresh" @getYWork="getYWork"></work>
            <!--故障报警-->
            <el-row type="flex" justify="space-between ur-card-body p-0" style="background:rgba(1,0,37,0.6);">
              <el-col :span="11">
                <div class="ur-card w-100">
                  <div style="line-height: 24px;background:rgba(11,25,77,0.5);">
                    <div class="d-flex align-items-center justify-content-around titleMark_large mx-auto font12" >
                      <i class="iconfont icon-title2-small mr-0"></i>视频监控<i class="iconfont icon-title3-small mr-0"></i>
                    </div>
                  </div>
                  <div class="ur-card-body px-0">
                    <video id="myPlayer" :src="global.VideoSrc" poster="~assets/image/dashboard/camera.png"
                    controls autoplay muted playsInline webkit-playsinline width="200" height="180"></video>

<!--                    <video id="myPlayer" poster="~assets/image/dashboard/camera.png" width="200" height="180" controls playsInline webkit-playsinline autoplay>-->
<!--                      <source src="ezopen://open.ys7.com/G44980365/1.hd.live" />-->
<!--                    </video>-->

                    <!-- <embed src="https://hls01open.ys7.com/openlive/6e0b2be040a943489ef0b9bb344b96b8.hd.m3u8" height="500" width="600"></embed>-->
                    <!--<img src="~assets/image/dashboard/camera.png" width="170">-->
                  </div>
                </div>
              </el-col>
              <el-col :span="13">
                <div class="ur-card w-100">
                  <div style="line-height: 24px;background:rgba(11,25,77,0.5);">
                    <div class="d-flex align-items-center justify-content-around titleMark_large mx-auto font12" >
                      <i class="iconfont icon-title2-small mr-0"></i>故障报警<i class="iconfont icon-title3-small mr-0"></i>
                    </div>
                  </div>
                  <div class="ur-card-body px-2" :class="{active:statisticIndex==8}">
                    <vue-seamless-scroll :data="alarmList" class="seamless-warp" :class-option="classOption">
                      <ul class="alarmGroup w-100">
<!--                        <li>配电箱名称</li>-->
                        <li class="w-100" v-for="(row,index) in alarmList">
                          <el-popover class="ur-popover w-100" trigger="hover" placement="left">
                            <p class="text-warning">报警类型：{{ row.AlarmType }}</p>
                            <p class="text-warning">名称：{{ row.BoxName }}</p>
                            <p class="text-warning">报警时间：{{row.AlarmTime }}</p>
                            <div slot="reference" class="w-100 text-center font12" style="color:#d8d8d8;">
                              {{row.BoxName}}
                            </div>
                          </el-popover>
                        </li>
                      </ul>
                    </vue-seamless-scroll>
                  <!--  <el-table ref="alarmTable"  class="alarmTable w-100" :data="alarmList" :height="160" >
                      &lt;!&ndash;                    <el-table-clumn  prop="AlarmType" label="报警类型" align="center" width="120"></el-table-column>&ndash;&gt;
                      <el-table-column  label="配电柜名称" align="center" >
                        <template slot-scope="scope">
                          <el-popover class="ur-popover" trigger="hover" placement="left">
                            <p class="text-warning">报警类型：{{ scope.row.AlarmType }}</p>
                            <p class="text-warning">名称：{{ scope.row.BoxName }}</p>
                            <p class="text-warning">报警时间：{{ scope.row.AlarmTime }}</p>
                            <div slot="reference" class="font12">
                              {{ scope.row.BoxName }}
                            </div>
                          </el-popover>
                        </template>
                      </el-table-column>
                    </el-table>-->
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>

      <!--区域地图鼠标移入显示数据信息-->
      <div v-show="showPopover" class="regionInfo p_absolute" ref="regionInfo" style="z-index: 999">
        <device-statistics :region="region" :regionData="regionData"></device-statistics>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapMutations, mapState} from 'vuex'
  import api from 'api/api'
  import fetch from 'api/fetch'
  import cardHeader from "base/card-header"
  import electricityTime from './electricity-time'
  import deviceStatistics from './device-statistics'
  import energy from "./energy"
  import lightRate from './light-rate'
  import work from "./work"
  import task from "./task"
  import vueSeamlessScroll from 'vue-seamless-scroll'
  import uMap from './map'
  import uMap2 from './map2'
  import uMap3 from './map3'
  import uMap4 from './map4'
  import uMap5 from './map5'
  import uMap6 from './map6'

  export default {
    components: {
      cardHeader,electricityTime,energy,lightRate,work,task,vueSeamlessScroll,deviceStatistics,uMap,uMap2,uMap3,uMap4,uMap5,uMap6
    },
    props: {},
    data() {
      return {
        loadSign:false,
        fetch:fetch,
        totalCount:{},
        devices:[
            {icon:'road',name:'道路',data:'RegionCount'},{icon:'box',name:'配电箱',data:'BoxCount'},{icon:'ecc2',name:'集中器',data:'EccCount'},
            {icon:'sensor',name:'传感器',data:'MeterCount'},{icon:'controller2',name:'控制器',data:'PoleCoount'},{icon:'bulb',name:'灯源',data:'BulbCount'},
        ],
        deviceState:[
        /*  {icon:'light-state',name:'亮灯状态',
            child:[
              {subName:'昨日亮灯',data:'Hours'},
              {subName:'昨日开灯',data:'ETime'},
              {subName:'昨日关灯',data:'STime'}
            ]
          },*/
          {icon:'ecc2',name:'集中器',
            child:[
              {subName:'在线个数',data:'EccOnlineCount'},
              {subName:'在线率',data:'OnlineRate'},
            ]
          },
          {icon:'maintain',name:'运行维护',
            child:[
              {subName:'设施完好率',data:'INomalRate'},
              {subName:'维修完成率',data:'ICompletedRate'}
            ]
          },
          {icon:'energy-rate',name:'节能率',data:'energyRate',
            child:[
              {subName:'昨日节能率',data:'YesEnergyRate'},
              {subName:'上月节能率',data:'LastMonthEnergyRate'}
            ]
          },
          {icon:'liaght-rate',name:'亮灯率',
            child:[
              {subName:'昨日亮灯率',data:'YLightingRate'},
              {subName:'上月亮灯率',data:'LastMonthLightingRate'}
            ]
          },
          {icon:'alarm',name:'报警',
            child:[
              {subName:'报警个数',data:'IAlarmTotal'},
              {subName:'低功率',data:'IAlarmCount'},
              {subName:'疑似线路故障',data:'IFaultCount'}
            ]
          },
          {icon:'energy',name:'用电量',data:'energy',
            child:[
              {subName:'理论用电量',data:'TheoryEnergy'},
              {subName:'实际用电量',data:'ActualEnergy'}
            ]
          },
        ],
        alarmList:[],
        statistic:[{name:'设备统计'},{name:'在线率'},{name:'能耗统计'},
          {name:'运行计划'},{name:'运行状况'},{name:'亮灯率'},
          {name:'工单统计'},{name:'实时报警'}],
        statisticIndex:1,
        showPopover:false,
        regions:[],
        region:{Ecc:{},Pole:{}},
        regionData: {EccCount:0,PoleCount:0,BulbCount:0},
        iconImg:{1:'ecc2',2:'light-state',3:'energy',4:'maintain',5:'energy-rate',6:'liaght-rate',7:'maintain',8:'alarm'},
        iconCount:{1:4,2:4,3:4,4:4,5:2,6:3,7:4,8:4},
        showIcon:true,
        currentTime:'',
        // strokeIndex:1,
        isRefresh:true,
        YActual:0,
        workCompleted:0,
        top:0,
        left:0,
        initData:window.InitData
      }
    },
    watch: {

    },
    computed: {
      ...mapState({
        clientWidth: state => state.comm.clientWidth,
        clientHeight: state => state.comm.clientHeight,
        timer2: state => state.timer.timer2,
      }),
      classOption () {
        return {
          step: 0.3, // 数值越大速度滚动越快
          limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
        }
      },
      getPower(){
        let h = new Date().getHours()
        return h < 23 ? parseInt((Math.random() * 75 + 3850), 10) : parseInt((Math.random() * 40 + 2635), 10)
      },
    },
    methods: {
      ...mapMutations({
        setResize: 'comm/SET_RESIZE',
      }),
      getTime(){
        let _this=this
        setInterval(()=>{
          _this.currentTime=api.formatDate(new Date(),'yyyy年MM月dd日 HH:mm:ss')
        },1000)
      },
      getYActual(v){
        this.YActual = v
      },
      getYWork(v){
        this.workCompleted=v
      },
      updateXY(v){
        this.regionData={...v.regionData,...this.initData.deviceData}
        this.region=v.region
        this.$store.commit('timer/clearTimer2')
        let evt=v.event
        let x=evt.pageX
        let y=evt.pageY
        this.$refs.regionInfo.style.top = y - 190 + 'px'
        this.$refs.regionInfo.style.left = x - 200 + 'px'
        this.top=y - 190
        this.left= x - 200
        this.$refs.regionInfo.style.right='auto'
      },
      updateShowPopover(v){
        this.showPopover=v
      },
      toLightSystem(){
        window.open('http://'+api.localhost+'/index.html')
      },
      clearTimer(index){
        this.statisticIndex=index
        this.$store.commit('timer/clearTimer')
      },

      setTimer(){
        let _this=this
        this.$store.commit('timer/setTimer',setInterval(()=>{
          _this.statisticIndex++
          if(_this.statisticIndex>8){
            _this.statisticIndex=1
          }
        },8000))
      },
      setIcons2(){
        let icons=this.$refs.icon
        //  let whs=[[287,269],[200,150],[200,50],[274,96],[99,61],[240,141],[105,147],[443,198]]
        let whs=[[210,200],[200,150],[200,40],[140,50],[70,30],[180,100],[80,100],[400,150]]
        let woffset=[120,100,100,30,20, 50,50,200]
        let hoffset=[50,120,10,10,10, 30,20,100]
        for(let i=0;i<icons.length;i++){
          // let w=icons[i].offsetWidth
          // let h=icons[i].offsetHeight
          let childrens=icons[i].children
          for(let j=0;j<childrens.length;j++){
            childrens[j].style.left=parseInt(Math.random()*(whs[i][0]-woffset[i])+woffset[i],10)+'px'
            childrens[j].style.top=parseInt(Math.random()*(whs[i][1]-hoffset[i])+hoffset[i],10)+'px'
          }
        }
      },
      totalInfo(){
        api.fetchSimple('/OverView/TotalInfo')
            .then(r=>{
              this.alarmList=r.ALarmInfo
              //临时修改
              // r.YesEnergyRate='24.62%'
              r.YesEnergyRate=r.LastMonthEnergyRate
              r = {...r, ...window.InitData.RunStateData}//假数据替换
              this.totalCount = r
              this.$set(this.totalCount, 'IAlarmTotal', (r.IAlarmCount + r.IFaultCount))
              // this.regions=r.Regions.splice(1,8)
              this.regions=r.Regions
            })
      },

    },
    created() {
      this.totalInfo()
      for(let i=0;i<8;i++){
        this.regions.push({Name:''})
      }
      this.setTimer()
      this.getTime()
      let that = this
      window.onresize = function () {
        that.setResize({clientWidth:document.body.clientWidth,clientHeight:document.body.clientHeight})
      }
    },
    mounted() {
      var player = new EZUIKit.EZUIPlayer('myPlayer')
      player.play()
    /*  new EZUIPlayer({
         id: 'myPlayer',
         url: 'https://hls01open.ys7.com/openlive/6e0b2be040a943489ef0b9bb344b96b8.hd.m3u8',
         accessToken: "at.8o2k6dbpcvtr13reaa96hbnya6fee2wf-9gu6zcjmh2-1j4yrsb-imvlc5poc",
         decoderPath:'static/libs/ezuikit.js',
         width: 200, height: 400, autoplay: true,
       })*/
    },
    beforeRouteLeave(to,form,next){
      this.$store.commit('timer/clearTimer')
      this.$store.commit('timer/clearTimer2')
      this.$store.commit('timer/clearElectricityTimer')
      this.$store.commit('timer/clearEnergyTimer')
      this.$store.commit('timer/clearLightRateTimer')
      this.$store.commit('timer/clearWorkTimer')
      next()
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .banner{width: 100%;height:100%;padding-bottom:5px;background:url('~assets/image/dashboard/banner.png') repeat;
    .currentTime{
    //  background-image: linear-gradient(top, #2f84ab, #fff);
      background-image: -webkit-gradient(linear, left top, left bottom, from(#2f84ab), to(#fff))
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      font-weight: bold;
     /* position: relative;
      color: #1DB8F1;
      &:before{ content: attr(text); position: absolute; z-index: 10; color:#fff;
        -webkit-mask:linear-gradient(to bottom ,#fff, transparent );
      }*/
    }
    .banner_marker{background:rgba(11, 25, 77, 0.5);}
    .logo{width: 100%;height: 81px; background: url('~static/image/logo.png') no-repeat; background-size: contain;}
    .ur-card{position:relative;margin-bottom:6px;}
    .ur-card-body{display:flex;justify-content:space-between;flex-wrap:wrap;background:rgba(1,0,37,0.75);height :180px;width:100%;
      padding:15px 15px 8px 15px;
     // &.active{box-shadow:0px 0px 10px 5px rgba(97,255,230,0.79)  ;}
      &.active{
        box-shadow:0px 2px 8px 5px rgba(97,255,230,0.79);background:rgba(1,0,37,0.5);}
      li{
        display:flex;align-items:center;width:115px;
        &:nth-child(3n){width:135px;}
        &.deviceItem:nth-child(1),&.deviceItem:nth-child(4){width:100px !important;}
        label{display:block;color:#E5F0FF;font-size:18px;font-weight:bold;}
        span{display:block;color:#27CCF8;font-size:12px;line-height:20px;}
        &.deviceStateItem{
          label{display:block;width:100%;font-size :12px;font-weight:normal;font-weight:600;}
          span{display:block;width:90px;font-size :14px;transform:scale(0.7);line-height:18px;}
        }
      }
    }
    .statistic_wrap{position:relative;width:400px;
      .statisticGroup{position:relative;width:300px;height:300px;padding:58px 0 0 158px;background: url('~assets/image/dashboard/statistic13.png') no-repeat;background-size:contain;border-radius:100%;
        //animation:rotate360 15s  linear infinite;
        li{
          width 60px;padding-left:2px;position:absolute;color: #02232C;z-index:10;
          &.active{color:#DEF3F9;}
          &:nth-child(1){transform-origin: 0 0; transform: rotate(25deg);}
          &:nth-child(2){top:98px;right:18px;transform-origin: 0 0;transform: rotate(70deg);}
          &:nth-child(3){top:160px;right:0px;transform-origin: 0 0;transform: rotate(115deg);}
          &:nth-child(4){top:220px;right:30px;transform-origin: 0 0;transform: rotate(160deg);}
          &:nth-child(5){top:240px;left:140px;transform-origin: 0 0;transform: rotate(205deg);}
          &:nth-child(6){top:200px;left:76px;transform-origin: 0 0;transform: rotate(250deg);}
          &:nth-child(7){top:140px;left:60px;transform-origin: 0 0;transform: rotate(295deg);}
          &:nth-child(8){top:78px;left:94px;transform-origin: 0 0;transform: rotate(340deg);}
        }
      }
      .statistic_active{position:absolute;width:120px;height:130px;margin-left: 148px; top: -26px;z-index:2;
        background: url('~assets/image/dashboard/statistic_active11.png') no-repeat;transform-origin: 0 0;
        &.active1{}
        &.active2{top:24px;right:6px;transform: rotate(45deg);}
        &.active3{top:148px;right:-46px;transform: rotate(90deg);}
        &.active4{top:272px;right:6px;transform: rotate(135deg);}
        &.active5{top:324px;left:4px;transform: rotate(180deg);}
        &.active6{top:274px;left:-120px;transform: rotate(225deg);}
        &.active7{top: 152px; left: -172px;transform: rotate(-90deg);}
        &.active8{top: 28px; left: -124px; transform: rotate(-45deg);}
      }
      .statistic_info{width:100px;height:100;text-align:center;top:50%;left:50%;margin-top:-45px;margin-left:-100px;
        h4{font-size:30px;font-weight:bold;color:#E5F0FF;line-height:44px;margin-top:6px;}
        h6{font-size:16px;font-weight:600;color:#27CCF8}
      }
    }


    .regionMap_icon{
      position:absolute;top:50px; left:100px;
      li{font-size:12px;color:#27CCF8;margin-bottom:3px;
         i{vertical-align:text-top}
      }
    }
    .region_scale{position:absolute;bottom:0px; right:80px;height:32px;padding:0 10px;background:rgba(24,56,107,0.5);border-radius:20px;
      li{width:20px;height:20px;}
    }
    .regionInfo{
      width:200px;height:184px;padding:10px 5px 10px 7px;background:rgba(1,0,37,0.6); box-shadow:0px 0px 5px 1px rgba(29,184,241,1);
      .regionInfoItem{display:flex;justify-content:space-between;width:100%;height:30px;line-height:30px;font-weight:600;background:rgba(49,62,92,0.2);margin-bottom:4px;padding:0 5px 0 10px;
        label{color:#F0F0F0;font-size:18px;}
        .subItem{display:flex;align-items:center;margin-left:-5px;
          label{font-size:12px;font-weight:normal;line-height:12px;transform: scale(0.8);margin-left:-8px;}
          .iconfont{width:14px;height:14px;}
        }
        .iconfont{width:18px;height:18px;margin-right:10px;background-size:contain;vertical-align:text-top}
      }
    }
    /*报警表格样式*/
    .alarmTable.el-table tr:nth-child(2n),.alarmTable.el-table tr:nth-child(2n),.alarmTable .el-table__header tr{background:rgba(19,42,105,1);}
    .alarmTable.el-table--enable-row-hover .el-table__body tr:hover:nth-child(2n)>td{background-color:rgba(19,42,105,1) !important;}

    .icon-road{width: 50px;height: 50px;background: url("~assets/image/dashboard/daolu.png") no-repeat; background-size:contain;}
    .icon-box{width: 50px;height: 50px;background: url("~assets/image/dashboard/配电柜.png") no-repeat; background-size:contain;}
    .icon-ecc2{width: 50px;height: 50px;background: url("~assets/image/dashboard/集中器.png") no-repeat; background-size:contain;}
    .icon-sensor{width: 50px;height: 50px;background: url("~assets/image/dashboard/传感器.png") no-repeat; background-size:contain;}
    .icon-controller2{width: 50px;height: 50px;background: url("~assets/image/dashboard/控制器.png") no-repeat; background-size:contain;}
    .icon-bulb{width: 50px;height: 50px;background: url("~assets/image/dashboard/灯源.png") no-repeat; background-size:contain;}
    .icon-light-state{width: 50px;height: 50px;background: url("~assets/image/dashboard/亮灯.png") no-repeat; background-size:contain;}
    .icon-maintain{width: 50px;height: 50px;background: url("~assets/image/dashboard/维护.png") no-repeat; background-size:contain;}
    .icon-energy-rate{width: 50px;height: 50px;background: url("~assets/image/dashboard/节能率.png") no-repeat; background-size:contain;}
    .icon-liaght-rate{width: 50px;height: 50px;background: url("~assets/image/dashboard/亮灯率.png") no-repeat; background-size:contain;}
    .icon-alarm{width: 50px;height: 50px;background: url("~assets/image/dashboard/报警.png") no-repeat; background-size:contain;}
    .icon-energy{width: 50px;height: 50px;background: url("~assets/image/dashboard/用电量.png") no-repeat; background-size:contain;}
    .alarmTable.el-table td,.alarmTable.el-table th{padding:2px 0 !important;}

    .seamless-warp {width: 100%; height: calc(100% - 16px); overflow: hidden;}
    .alarmGroup{
      li{width:100%;text-align:center;padding:4px 0;height:32px;line-height:16px;

        &:nth-child(odd){ background:rgba(19,42,105,0.6)}
        &:nth-child(even){ background:rgba(1,0,37,0.6);}
      }
    }
    .slide-fade-enter-active{transition: all 1s ease;}
    .slide-fade-leave-active{transition: all 1s cubic-bezier(1.0, 0.5, 0.8, 1.0);}
    .slide-fade-enter, .slide-fade-leave-to{ opacity: 0;}
     @keyframes rotate360{
       0%{transform:rotate(0)}
       100%{transform:rotate(360deg)}

     }
  }
</style>
